<script setup lang="ts">
import { ref } from "vue";
import { sendEmailApi, ILogin, loginApi } from "@/api/auth";
import { showToast } from "vant";
import { useRouter } from "vue-router";
const router = useRouter();

const formData = ref<ILogin>({});

const onSubmit = () => {
  console.log(formData.value);
  loginApi(formData.value as ILogin).then((res) => {
    console.log(res);
    localStorage.setItem("token", res.data.token);
    router.push("/");
  });
};

const toRegister = () => {
  router.push("/register");
};

const loginFlag = ref(0); // 0:账号密码 1:邮箱

const time = ref(0);
const text = ref("获取验证码");
const sendCode = async () => {
  if (time.value > 0) return;
  if (!formData.value.email) return showToast("请输入邮箱");
  const res = await sendEmailApi({ email: formData.value.email });
  console.log(res.data.msg);
  time.value = 60;
  const timer = setInterval(() => {
    time.value--;
    text.value = `${time.value}s`;
    if (time.value <= 0) {
      clearInterval(timer);
      text.value = "获取验证码";
    }
  }, 1000);
};
</script>

<template>
  <div class="login">
    <van-nav-bar title="登录" />

    <van-form @submit="onSubmit">
      <van-cell-group inset v-if="loginFlag == 0">
        <van-field
          v-model="formData.username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="formData.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        >
        </van-field>
      </van-cell-group>

      <template v-if="loginFlag == 1">
        <van-cell-group inset>
          <van-field
            v-model="formData.email"
            name="email"
            label="邮箱"
            placeholder="邮箱"
            :rules="[{ required: true, message: '请填写邮箱' }]"
          />
          <van-field
            v-model="formData.code"
            name="code"
            label="验证码"
            placeholder="验证码"
            :rules="[{ required: true, message: '请填写验证码' }]"
          >
            <template #button>
              <van-button
                :disabled="time > 0"
                size="small"
                type="primary"
                @click="sendCode"
                >{{ text }}</van-button
              >
            </template>
          </van-field>
        </van-cell-group>
      </template>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          登录
        </van-button>
      </div>

      <div class="login__methods">
        <span
          class="login__methods-email"
          @click="loginFlag = 1"
          v-if="loginFlag == 0"
          >邮箱登录</span
        >
        <span class="login__methods-account" @click="loginFlag = 0" v-else>
          账号密码登录
        </span>

        <span class="login__methods-register" @click="toRegister"
          >还没有账号？去注册</span
        >
      </div>
    </van-form>
  </div>
</template>
